<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/common/common.jsp"%>

<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.6
Version: 4.5.4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->
    <!-- BEGIN HEAD -->

    <head>
        <meta charset="utf-8" />
        <title>后台管理系统</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />
        <!-- BEGIN GLOBAL MANDATORY STYLES -->
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
        <link href="${basePath}/res/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="${basePath}/res/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
        <link href="${basePath}/res/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="${basePath}/res/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
        <link href="${basePath}/res/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
        <!-- END GLOBAL MANDATORY STYLES -->
        <!-- BEGIN PAGE LEVEL PLUGINS -->
        <link href="${basePath}/res/assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css" />
        <!-- END PAGE LEVEL PLUGINS -->
        <!-- BEGIN THEME GLOBAL STYLES -->
        <link href="${basePath}/res/assets/global/css/components-rounded.min.css" rel="stylesheet" id="style_components" type="text/css" />
        <link href="${basePath}/res/assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
        <!-- END THEME GLOBAL STYLES -->
        <!-- BEGIN THEME LAYOUT STYLES -->
        <link href="${basePath}/res/assets/layouts/layout2/css/layout.min.css" rel="stylesheet" type="text/css" />
        <link href="${basePath}/res/assets/layouts/layout2/css/themes/blue.min.css" rel="stylesheet" type="text/css" id="style_color" />
        <link href="${basePath}/res/assets/layouts/layout2/css/custom.min.css" rel="stylesheet" type="text/css" />
        <!-- END THEME LAYOUT STYLES -->
        
        <link rel="shortcut icon" href="favicon.ico" /> </head>
    <!-- END HEAD -->

    <body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid">
        
        <%@ include file="/manage/page-header.jsp" %>
        
        <!-- BEGIN HEADER & CONTENT DIVIDER -->
        <div class="clearfix"> </div>
        <!-- END HEADER & CONTENT DIVIDER -->
        <!-- BEGIN CONTAINER -->
        <div class="page-container">
            
            <%@include file="/manage/page-sidebar.jsp" %>
            
            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div class="page-content">
                    <!-- BEGIN PAGE HEADER-->
                    
                    <%@include file="/manage/theme-panel.jsp" %>
                    <%@include file="/manage/page-title.jsp" %>
                    
                    
                    <!-- END PAGE HEADER-->
                    <!-- BEGIN PAGE CONTENT-->
                    
                    <div class="row">
                    	<div class="col-md-12">
                    		<div class="portlet box green">
	                            <div class="portlet-title">
	                                <div class="caption">
	                                    <i class="fa fa-gift"></i>角色新增
	                                </div>
	                            </div>
	                            <div class="portlet-body">
	                            
	                            
	                            	<div class="row">
										<div class="col-md-12">
											<c:if test="${!empty msg }">
												<div class="custom-alerts alert alert-danger fade in">
													<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
													${msg }
												</div>
											</c:if>
										</div>
									</div>
	                            
								  	<form class="form-horizontal" role="form" action="${basePath }/manage/user/add" id="dataForm" method="post">
								  	
								  		<input type="hidden" name="vo.id" value="${vo.id }">
								  	
                                        <div class="form-group">
                                            <label for="" class="col-md-2 control-label"><font color="red">*</font>用户名</label>
                                            <div class="col-md-4">
                                                <input type="text" name="vo.username" class="form-control" id="" placeholder="用户名" value="${vo.username }">
                                            </div>
                                            <div class="col-md-6">
                                                <span class="help-inline">
                                                	请注意：用户名新增完以后，不能修改！
                                                </span>
                                             </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="" class="col-md-2 control-label"><font color="red">*</font>密码</label>
                                            <div class="col-md-4">
                                                <input type="password" name="vo.password" class="form-control" id="" placeholder="密码" value="${vo.password }"> 
                                        	</div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="" class="col-md-2 control-label">昵称</label>
                                            <div class="col-md-4">
                                                <input type="text" name="vo.nickname" class="form-control" id="" placeholder="昵称" value="${vo.nickname }"> 
                                        	</div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="" class="col-md-2 control-label">邮箱</label>
                                            <div class="col-md-4">
                                                <input type="text" name="vo.email" class="form-control" id="" placeholder="邮箱" value="${vo.email }"> 
                                        	</div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="" class="col-md-2 control-label">手机号</label>
                                            <div class="col-md-4">
                                                <input type="text" name="vo.cellphone" class="form-control" id="" placeholder="手机号" value="${vo.cellphone }"> 
                                        	</div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="" class="col-md-2 control-label"><font color="red">*</font>角色</label>
                                            <div class="col-md-4">
                                            	<select name="ck" class="form-control ">
                                            		<option value="">---请选择---</option>
                                            		<c:forEach items="${roles }" var="role">
	                                            		<option value="${role.id }" ${role.checked?'selected':'' }>${role.name }</option>
	                                            	</c:forEach>
                                            	</select>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <div class="col-md-offset-2 col-md-10">
                                                <button type="button" class="btn blue" onclick="doSave();">保存</button>
                                            </div>
                                        </div>
                                    </form>
								  	
                                </div>
                            </div>
                    	</div>
                        
                    </div>
                    <!-- END PAGE CONTENT-->
                </div>
                
                <!-- END CONTENT BODY -->
            </div>
            <!-- END CONTENT -->
        </div>
        
            
        <%@ include file="/manage/page-quick-sidebar-toggler.jsp" %>
    
    	<%@ include file="/manage/page-footer.jsp" %>
            
        <!--[if lt IE 9]>
<script src="${basePath}/res/assets/global/plugins/respond.min.js"></script>
<script src="${basePath}/res/assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
        <!-- BEGIN CORE PLUGINS -->
        <script src="${basePath}/res/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
        <!-- END CORE PLUGINS -->
        
        <script src="${basePath}/res/assets/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
        
        <!-- BEGIN THEME GLOBAL SCRIPTS -->
        <script src="${basePath}/res/assets/global/scripts/app.js" type="text/javascript"></script>
        <!-- END THEME GLOBAL SCRIPTS -->
        <!-- BEGIN THEME LAYOUT SCRIPTS -->
        <script src="${basePath}/res/assets/layouts/layout2/scripts/layout.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/layouts/layout2/scripts/demo.js" type="text/javascript"></script>
        <script src="${basePath}/res/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
        <!-- END THEME LAYOUT SCRIPTS -->
        
        <script type="text/javascript">

        	bootbox.setLocale("zh_CN");
	   	 	
        	function checkUser(async){
        		var username=$(":input[name='vo.username']").val();
        		$.ajax({
        			type:"post",
        			url:"${basePath }/manage/user/isExit",
        			data:"username="+username,
        			async:async,
        			success:function(data){
        				
        				if(data.flag){
        					if(data.data){
        						if($("#username-help-inline").length==0){
        							var span="<span class=\"help-inline\"  id=\"username-help-inline\"><font color=\"red\">该用户名已存在，请更换成其他！</font></span>";
            						$(":input[name='vo.username']").after(span);
        						}
        					}else{
        						$("#username-help-inline").remove();
        					}
        				}
        				
        			}
        		});
        		return true;
        	}
        	
	   	 	function doSave(){
	   	 		if(checkUser(false)){
		   	 		bootbox.confirm("确认保存?", function(result) {
		                if(result){
		                	$('#dataForm').submit();
		                }
		             }); 
	   	 		}
	   	 	}
			
	   	 	$(function(){
		   	 	$(":input[name='vo.username']").blur(function(){
		   	 		checkUser(true);//使用异步验证
		   	 	});
	   	 	});
        </script>
        
    </body>

</html>